<template>
    <div class="home">
       <van-nav-bar class="app-nav-bar">
          <van-button class="search-btn" slot="title" icon="search" type="info" round size="small" to="/search">搜索</van-button>
       </van-nav-bar>

         <!-- 文章频道列表 -->
       <van-tabs v-model="active">
         <van-tab :title="item.name" v-for="item in channels" :key="item.id">
            <article-list :channel="item"></article-list>
         </van-tab>
         <div slot="nav-right" @click="isChannelEditShow=true" class="wap-nav-wrap">
            <van-icon name="wap-nav"></van-icon>
         </div>
      </van-tabs>

      <!-- 弹出层 -->
      <van-popup v-model="isChannelEditShow" position="bottom" style="height:100%" closeable close-icon-position="top-left" et-container="body">
         <channel-edit :active="active" @close="isChannelEditShow=false" @update-active="onUpdateActive" :userChannels="channels"></channel-edit>
      </van-popup>
    </div>
</template>
<script>
import { getUserChannnel } from '@/api/user'
import ArticleList from './components/articleList'
import ChannelEdit from './components/channelEdit'
import { mapState } from 'vuex'
import { getItem } from '@/utils/stroage'
export default {
   name:'home',
   components:{
      ArticleList,ChannelEdit
   },
   data() {
      return {
         active: 0,
         channels:[],
         isChannelEditShow:false,
         
      }
   },
   computed:{
      ...mapState(['user'])
   },
   created(){
      this.loadChannels()
   },
   methods: {
      async loadChannels(){
         // const res = await getUserChannnel()
         // // console.log(res);
         // this.channels=res.data.data.channels
         let channels = []
         if(this.user){
            const res = await getUserChannnel()
            channels = res.data.data.channels
         }else{
            //未登录
            const localChannels = getItem('user-channels')
            if(localChannels){
               channels = localChannels
            }else{
               //请求默认推荐李彪
               const res = await getUserChannnel()
               channels = res.data.data.channels
            }
         }
         this.channels =channels
      },
      onUpdateActive(index){
         this.active =index
      }
   }
}
</script>
<style lang="scss" scoped>
.home{
   ::v-deep .van-nav-bar__title{
      max-width:none
   }
   .search-btn{
      width: 277px;
      height: 32px;
      background-color: #5babfb;
   }
  .wap-nav-wrap{
     position: fixed;
     right: 0;
     width: 33px;
     height: 40px;
     line-height: 33px;
     background: #fff;
     opacity: .9;
     display: flex;
     justify-content: center;
     align-items: center;
     .van-icon{
        font-size: 24px;
     }
  }
}
</style>
